<template>
  <page-form-row>
    <page-form-item label="是否允许上门送/取车" size="1">
      <template #label="{ label }">
        <span class="font-bold">{{ label }}</span>
      </template>
      <a-radio-group v-model="form[configTypePropStr].isOnsiteService" @change="isOnsiteServiceChangeFn">
        <a-radio v-for="item in dict.onsiteServiceMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
      </a-radio-group>
    </page-form-item>
    <page-form-item
      v-if="form[configTypePropStr].isOnsiteService == 1"
      label="上门送取车是否收费"
      size="1"
      :style="{ marginBottom: form[configTypePropStr].isOnsiteServiceFee ? '3px' : '10px' }"
    >
      <template #label="{ label }">
        <span class="font-bold">{{ label }}</span>
      </template>
      <a-radio-group v-model="form[configTypePropStr].isOnsiteServiceFee" @change="isOnsiteServiceFeeChangeFn">
        <a-radio v-for="item in dict.onsiteServiceFeeMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
      </a-radio-group>
    </page-form-item>
  </page-form-row>
  <template v-if="form[configTypePropStr].isOnsiteService == 1 && form[configTypePropStr].isOnsiteServiceFee == 1">
    <page-form-item size="1" :style="{ marginBottom: 0 }">
      <div class="page-form-block" style="margin-bottom: 16px">
        <div style="margin-bottom: 6px">收费规则</div>
        <div class="pickup-service-wrap">
          <div class="charge-list">
            <page-form-item
              class="charge-item"
              style="margin-bottom: 0"
              v-for="(item, index) in form[configTypePropStr].onsiteServiceFeeList"
              :key="index"
              size="1"
            >
              <template v-if="index > 0">
                <page-form-item style="margin-bottom: 0">
                  <i-input-number disabled v-model="item.startMileage" :style="{ width: '163px' }" unit="公里" />
                </page-form-item>
                <span class="charge-item-text">至</span>
              </template>
              <page-form-item
                style="margin-bottom: 0"
                :field="`${configTypePropStr}.onsiteServiceFeeList.${index}.endMileage`"
                :rules="{ required: true, message: '请输入公里数' }"
              >
                <i-input-number
                  v-model="item.endMileage"
                  :style="{ width: '163px' }"
                  :min="inputMinFn(index)"
                  :max="inputmaxFn(index)"
                  :disabled="inputMinFn(index) > inputmaxFn(index)"
                  :error="inputMinFn(index) > inputmaxFn(index)"
                  @change="pickupEndChangeFn(index)"
                  unit="公里"
                />
              </page-form-item>
              <span class="charge-item-text">内每次服务收费</span>
              <page-form-item
                required
                :field="`${configTypePropStr}.onsiteServiceFeeList.${index}.amount`"
                :rules="{ required: true, message: '请输入金额' }"
              >
                <i-input-number v-model="item.amount" :style="{ width: '163px' }" />
              </page-form-item>
              <operate-list
                style="position: relative; left: 0"
                :index="index"
                :onlyLastShowDelete="true"
                :length="form[configTypePropStr].onsiteServiceFeeList.length"
                @add="addPickupServiceRulesFn"
                @delete="deletePickupServiceRulesFn(index)"
              />
            </page-form-item>
          </div>
        </div>
      </div>
    </page-form-item>
    <page-form-row>
      <page-form-item
        :field="`${configTypePropStr}.isOnsiteMaxRadius`"
        label="是否限制上门送/取车最大距离"
        :style="{ marginBottom: '3px' }"
      >
        <template #label="{ label }">
          <span class="font-bold">{{ label }}</span>
        </template>
        <a-radio-group v-model="form[configTypePropStr].isOnsiteMaxRadius">
          <a-radio v-for="item in dict.onsiteMaxRadiusMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </page-form-item>
      <div class="page-form-block">
        <page-form-item class="charge-item" v-if="form[configTypePropStr].isOnsiteMaxRadius == 1" size="1">
          <i-input-number
            disabled
            :model-value="form[props.configTypePropStr].onsiteMaxRadius"
            placeholder="请输入"
            :style="{ width: '163px' }"
            unit="公里"
          />
          <span class="charge-item-text">外不提供上门服务</span>
        </page-form-item>
        <page-form-item class="charge-item" v-if="form[configTypePropStr].isOnsiteMaxRadius == 0" size="1">
          <i-input-number
            disabled
            :model-value="form[props.configTypePropStr].onsiteMaxRadius"
            placeholder="请输入"
            :style="{ width: '163px' }"
            unit="公里"
          />
          <span class="charge-item-text">外每次服务收费</span>
          <page-form-item
            style="margin-bottom: 0"
            :field="`${configTypePropStr}.overMaxRadiusAmount`"
            :rules="{ required: true, message: '请输入金额' }"
          >
            <i-input-number v-model="form[configTypePropStr].overMaxRadiusAmount" :style="{ width: '163px' }" />
          </page-form-item>
        </page-form-item>
      </div>
    </page-form-row>
  </template>
</template>

<script setup name="MerchantStoreServiceConfigPickup">
  import { inject, watch } from 'vue'
  import operateList from './operte-list.vue'
  const props = defineProps({
    configTypePropStr: String,
  })
  // 接收 form
  const form = inject('form')
  const dict = inject('dict')
  // 是否允许上门送/取车 切换事件
  const isOnsiteServiceChangeFn = (value) => {
    if (value == 1) {
      let isServiceFee = form.value[props.configTypePropStr].isOnsiteServiceFee
      isOnsiteServiceFeeChangeFn(isServiceFee)
    }
  }
  // 上门送取车是否收费切换事件
  const isOnsiteServiceFeeChangeFn = (value) => {
    if (value == 1) {
      let rules = form.value[props.configTypePropStr].onsiteServiceFeeList
      if (!rules || rules.length == 0) {
        // 默认值
        form.value[props.configTypePropStr].onsiteServiceFeeList = [
          {
            startMileage: 0,
            endMileage: '',
            amount: '',
          },
        ]
      }
    }
  }

  watch(
    () => form.value[props.configTypePropStr].onsiteServiceFeeList,
    (newVal) => {
      if (newVal) {
        let maxKm = newVal[newVal.length - 1].endMileage || ''
        // 上门取送车最大距离（超过不提供上门服务）
        form.value[props.configTypePropStr].onsiteMaxRadius = maxKm
      }
    },
    { immediate: true, deep: true }
  )
  // 新增配置
  const addPickupServiceRulesFn = () => {
    const rules = form.value[props.configTypePropStr].onsiteServiceFeeList
    const last = rules[rules.length - 1]
    const newRule = {
      startMileage: '',
      endMileage: '',
      amount: '',
    }
    if (last.endMileage) {
      newRule.startMileage = last.endMileage
    }
    form.value[props.configTypePropStr].onsiteServiceFeeList.push(newRule)
  }
  // 删除配置
  const deletePickupServiceRulesFn = (index) => {
    let rules = form.value[props.configTypePropStr].onsiteServiceFeeList
    rules.splice(index, 1)
  }
  // 更改单条结束公里数
  const pickupEndChangeFn = (index) => {
    const rules = form.value[props.configTypePropStr].onsiteServiceFeeList
    const item = rules[index]
    const next = rules[index + 1]
    if (next) {
      next.startMileage = item.endMileage
    }
  }
  const inputMinFn = (index) => {
    if (index == 0) {
      return 0
    }
    const rules = form.value[props.configTypePropStr].onsiteServiceFeeList
    let min = 0
    while (index > 0 && !min) {
      let prev = rules[index - 1]
      if (prev?.endMileage) {
        min = prev.endMileage + 1
      }
      index--
    }
    return min
  }
  const inputmaxFn = (index) => {
    const rules = form.value[props.configTypePropStr].onsiteServiceFeeList
    let max = undefined
    while (index < rules.length && !max) {
      let next = rules[index + 1]
      if (next?.endMileage) {
        max = next.endMileage - 1
      }
      index++
    }
    return max
  }
</script>

<style lang="less" scoped>
  .charge-item {
    margin-bottom: 16px;
    .charge-item-text {
      line-height: 32px;
      margin-left: 5px;
      margin-right: 5px;
    }
    :deep(.arco-form-item-content-flex) {
      align-items: flex-start;
    }
  }
  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px;
    padding-bottom: 4px;
    margin-bottom: 20px;
    width: 100%;
  }
</style>
